<template>
    <div class="city-list">
        <p><span :class="{ 'country-selected': this.isCountry}">{{ this.country }}</span> · <span :class="{ 'city-selected': this.isCity}">{{ this.city }}</span> · <span :class="{ 'city-selected': this.isViews}">{{ this.views }}</span></p>
    </div>
</template>

<script>
export default {
    name: 'cityList',
    props: {
        country: {
            default: '国家'
        },
        city: {
            default: '城市'
        },
        views: {
            default: '景点'
        },
        isCountry: {
            default: false
        },
        isCity: {
            default: false
        },
        isViews: {
            default: false
        }
    }
}
</script>

<style lang="less" scoped>
.city-list {
    width: 100%;
    background: #fff;
    position: fixed;
    left: 0;
    top: 0;
    z-index: 999;

    p {
        color: #aaa;
        font-size: 1.6rem;
        line-height: 5rem;
        margin-left: 5%;
    }

    .country-selected {
        color: #000;
    }

    .city-selected {
        color: #000;
    }
}
</style>
